<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一朵 - 更换手机</title>
  <!-- swiper-2.7css -->
    <link rel="stylesheet" href="__STATIC__/index/js/swiper/idangerous.swiper.css">
  <!-- swiper-2.7js -->
    <script src="__STATIC__/index/js/swiper/idangerous.swiper.min.js"></script>
  <!-- jquery-3.2.1引用 -->
    <script src="__STATIC__/index/js/global/jquery-3.2.1.min.js"></script>
  <!-- 阿里巴巴矢量图库 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_561814_t3316kgx96kcsor.css">
  <!-- 公共头部 脚部 -->
    <link rel="stylesheet" href="__STATIC__/index/css/global/global.css">
  <!-- 超过1200屏幕 -->
    <link rel="stylesheet" media="screen and (min-width: 1200px)" href="__STATIC__/index/css/change_phone/change_phone1200.css" />
  <!-- 1080-1200 -->
    <link rel="stylesheet" media="screen  and (min-width: 1080px) and (max-width: 1199px) " href="__STATIC__/index/css/change_phone/change_phone1080.css"
    />
  <!-- 960-1080 -->
    <link rel="stylesheet" media="screen  and (min-width: 960px) and (max-width: 1079px) " href="__STATIC__/index/css/change_phone/change_phone960.css"
    />
  <!-- 768-959 -->
    <link rel="stylesheet" media="screen  and (min-width: 768px) and (max-width: 959px) " href="__STATIC__/index/css/change_phone/change_phone768.css"
    />
  <!-- 568-767 -->
    <link rel="stylesheet" media="screen  and (min-width: 568px) and (max-width: 767px) " href="__STATIC__/index/css/change_phone/change_phone568.css"
    />
  <!-- 375-567 -->
    <link rel="stylesheet" media="screen  and (min-width: 375px) and (max-width: 567px) " href="__STATIC__/index/css/change_phone/change_phone375.css"
    />
  <!-- 小于375-->
    <link rel="stylesheet" media="screen  and (max-width: 374px) " href="__STATIC__/index/css/change_phone/change_phone320.css" />
  <!--一引入layer-->
    <script src="__STATIC__/layer/layer.js"></script>
</head>

<body>
    <form action="{:url('User/edit_mobile')}" method="post" id="form1">
    <div class="M">
        <div class="m-header">
            <div>
                <span onclick="go_back();">
                    <span class="iconfont icon-xiangzuo" ></span>
                    返回
                </span>
                <span>修改手机</span>
                <span>
                    {if condition="!empty($realname)"}
                        <a href="{:url('User/index')}" class="my" >
                            {$realname}
                        </a>
                    {else /}
                        <a href="{:url('Login/loginin')}">登录</a>
                        <a href="{:url('Login/register')}">注册</a>
                    {/if}
                    <a href="{:url('MyCart/my_cart')}" class="car">
                        <span class="iconfont icon-gouwuche"></span>
                        <span>{$cart_num}</span>
                    </a>
                </span>
            </div>

        </div>
        <p class="m-headline">请输入
            <span>{$user.mobile}</span> 完整手机号</p>
        <div class="m-phone">
            <div>
                <span>愿手机号</span>
                <input type="text" placeholder="请输入原先手机号" name="mobile1" onkeyup="get_mobile1(this)">
            </div>
        </div>
        <div class="m-phone">
            <div>
                <span>新手机号</span>
                <input type="text" placeholder="请输入新手机号" name="mobile" onkeyup="get_mobile(this)">
            </div>
        </div>
        <div class="m-verify">
            <div>
                <span>验证码</span>
                <span>
                    <input type="text" placeholder="填写验证码" name="msg_code" onkeyup="get_msg_code(this)">
                    <input class="btnSendCode" type="button" value="获取验证码" onclick="sendMessage()">
                </span>
            </div>
        </div>
        <a href="javascript:;" class="m-bottom" onclick="check_form1()">提交信息</a>
    </div>
    </form>

    <form action="{:url('User/edit_mobile')}" method="post" id="form2">
    <div class="PC">
        <div class="all">
            <div class="headline">
                <div>
                    <a href="{:url('Index/index')}">
                        <img src="__STATIC__/index/img/head/pc_logo.png" alt="">
                    </a>
                    <a href="{:url('User/index')}">
                        返回
                    </a>
                </div>
                <div>
                    <a href="{:url('User/index')}">{$user.realname}</a>
                    <span>丨</span>
                    <a href="{:url('Login/logout')}">退出</a>
                </div>
            </div>

            <div class="pc-content">
                <p>更换手机号</p>
                <p>请输入
                    <span>{$user.mobile}</span>完整手机号</p>
                <p>
                    <input type="text" placeholder="请输入原手机号" name="mobile1" onkeyup="get_mobile1(this)">
                </p>
                <p>
                    <input type="text" placeholder="请输入新手机号" name="mobile" onkeyup="get_mobile(this)">
                </p>
                <div class="pc-verification">
                    <input type="text" placeholder="填写验证码" name="msg_code" onkeyup="get_msg_code(this)">
                    <input class="btnSendCode" type="button" value="获取验证码" onclick="sendMessage()">
                </div>
                <a href="javascript:;" class="pc-bottom" onclick="check_form2()">确认修改</a>
            </div>
            <p>官网商城 2007-2017, 版权所有 京ICP备888888888号-1</p>
        </div>
    </div>
    </form>
    <script>
        /**
         * 返回上一页
         */
        function go_back(){
            window.history.back();  //返回上一页

        }

        var InterValObj; //timer变量，控制时间
        var count = 60; //间隔函数，1秒执行
        var curCount; //当前剩余秒数
        var code = ""; //验证码
        var codeLength = 6; //验证码长度
        function SetRemainTime() {
            if (curCount == 0) {
                window.clearInterval(InterValObj); //停止计时器
                $(".btnSendCode").removeAttr("disabled"); //启用按钮
                $(".btnSendCode").val("重新发送");
                $(".btnSendCode").css('color', '#000000');
                code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
            } else {
                curCount--;
                $(".btnSendCode").val(+curCount + "秒再次获取");
            }
        }

        function sendMessage() {
            var reg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
            var mobile = $('input[name=mobile]').val();
            if (mobile == '') {
//                alert('请输入正确的手机号');
                layer.msg('请输入手机号',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
//                return false;
                // layer.msg('请输入手机号', {
                //     icon: 5,
                //     time: 1500,
                //     shade: 0.1
                // });
                return false;
            }
            if (!reg.test($('input[name=mobile]').val())) {
//                alert('请输入正确的手机格式');
                layer.msg('请输入正确的手机格式',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                // layer.msg('手机格式错误，请重新输入', {
                //     icon: 2,
                //     time: 1500,
                //     shade: 0.1
                // }, function (index) {
                //     layer.close(index);
                // });
                return false;
            }
            curCount = count;
            var dealType; //验证方式
            var uid = $("#uid").val(); //用户uid
            if ($("#phone").attr("checked") == true) {
                dealType = "phone";
            } else {
                dealType = "email";
            }
            //产生验证码
            for (var i = 0; i < codeLength; i++) {
                code += parseInt(Math.random() * 9).toString();
            }
            //设置button效果，开始计时

            $(".btnSendCode").css('color', '#999');
            $(".btnSendCode").attr("disabled", "true");
            $(".btnSendCode").val(+curCount + "秒再次获取");
            InterValObj = window.setInterval(SetRemainTime, 1000);
            //启动计时器，1秒执行一次
            //向后台发送处理数据
             $.ajax({
                 type: "POST", //用POST方式传输
                 dataType: "text", //数据格式:JSON
                 url: "{:url('User/get_msg_code')}", //目标地址
                 data: "dealType=" + dealType + "&mobile=" + mobile,
                 error: function (XMLHttpRequest, textStatus, errorThrown) {},
                 success: function (msg) {}
             });
        }
        /**
         * 旧手机号同步
         */
        function get_mobile1(obj) {
            var vals = $(obj).val();
            vals = vals.replace(/[^\d]/g, '')
            $('input[name=mobile1]').val(vals);
        }
        /**
         * 新手机号同步
         */
        function get_mobile(obj) {
            var vals = $(obj).val();
            vals = vals.replace(/[^\d]/g, '')
            $('input[name=mobile]').val(vals);
        }
        /**
         * 验证码输入同步
         */
        function get_msg_code(obj) {
            var vals = $(obj).val();
            vals = vals.replace(/[^\d]/g, '')


            console.log(vals.length);
            $('input[name=msg_code]').val(vals);

        }
        /**
         * 检查表单数据
         */
        function check_form1(){
            var reg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
            var old_mobile = $('#form1').find('input[name=mobile1]').val();
            var mobile = $('#form1').find('input[name=mobile]').val();
            var msg_code = $('#form1').find('input[name=msg_code]').val();

            if(old_mobile == ''){
                layer.msg('请输入原手机号',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            if(mobile == ''){
                layer.msg('请输入新手机号',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            if(!reg.test(mobile)){
                layer.msg('请输入正确的手机号',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            if(old_mobile == mobile){
                layer.msg('新手机号不能和原手机号相同',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            if(msg_code == ''){
                layer.msg('请输入验证码',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            $.post("{:url('User/edit_mobile')}",
                {old_mobile:old_mobile,msg_code:msg_code,mobile:mobile},
                function(data){
                    if(data.code == 1){
                        layer.msg('修改成功',{icon:1,time:1500,shade: 0.1}, function(index){
                            layer.close(index);
                            window.location.href = "{:url('User/index')}";
                        });
                    }else{
                        layer.msg(data.msg,{icon:2,time:1500,shade: 0.1}, function(index){
                            layer.close(index);
                        });
                    }
                }
            );

        }

        function check_form2(){
            var reg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
            var old_mobile = $('#form2').find('input[name=mobile1]').val();
            var mobile = $('#form2').find('input[name=mobile]').val();
            var msg_code = $('#form2').find('input[name=msg_code]').val();

            if(old_mobile == ''){
                layer.msg('请输入原手机号',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            if(mobile == ''){
                layer.msg('请输入新手机号',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            if(!reg.test(mobile)){
                layer.msg('请输入正确的手机号',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            if(old_mobile == mobile){
                layer.msg('新手机号不能和原手机号相同',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            if(msg_code == ''){
                layer.msg('请输入验证码',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            $.post("{:url('User/edit_mobile')}",
                {old_mobile:old_mobile,msg_code:msg_code,mobile:mobile},
                function(data){
                    if(data.code == 1){
                        layer.msg('修改成功',{icon:1,time:1500,shade: 0.1}, function(index){
                            layer.close(index);
                            window.location.href = "{:url('User/index')}";
                        });
                    }else{
                        layer.msg(data.msg,{icon:2,time:1500,shade: 0.1}, function(index){
                            layer.close(index);
                        });
                    }
                }
            );

        }
    </script>
</body>

</html>